<template>
    <div>
        <van-nav-bar
            :fixed="true"
            title="分类"
            left-text="返回"
            left-arrow
            :placeholder="true"
            @click-left="$router.push('/home')"
        />
        <!-- tab组件 -->
        <van-tabs
            sticky
            animated
            swipeable
            v-model="activeName"
            @click="tabClick"
        >
            <van-tab
                v-for="item in brotherCategory"
                :title="item.name"
                :key="item.id"
                :name="item.id"
            >
                <p class="channel_sub_title">{{ item.front_desc }}</p>
                <!-- 商品列表 -->
                <!-- 下拉刷新 -->
                <van-pull-refresh
                    v-model="isLoading"
                    success-text="刷新成功"
                    :head-height="60"
                    @refresh="onRefresh"
                >
                    <van-list
                        v-model="loading"
                        :finished="finished"
                        finished-text="没有更多了"
                        @load="onLoad"
                        :immediate-check="false"
                    >
                        <div class="new">
                            <ul>
                                <li
                                    v-for="item in newGoodsList"
                                    @click="
                                        $router.push({
                                            name: 'Pruductdetail',
                                            params: { id: item.id },
                                        })
                                    "
                                    :key="item.id"
                                >
                                    <img v-lazy="item.list_pic_url" alt="" />
                                    <div>{{ item.name }}</div>
                                    <p>￥{{ item.retail_price }}元</p>
                                </li>
                            </ul>
                        </div>
                    </van-list>
                </van-pull-refresh>
            </van-tab>
        </van-tabs>
    </div>
</template>

<script>
import { GetChannel, GetChannelList } from "../request/api";
export default {
    data() {
        return {
            brotherCategory: [], //全部tab
            currentCategory: {}, //当前项所有信息
            activeName: "", //当前项id
            newGoodsList: [], //所有当前项id商品数据
            isLoading: false, //是否刷新
            totalPages: "", //多少页对象
            loading: false,
            finished: false,
        };
    },
    methods: {
        //点击tab切换
        tabClick() {
            this.$router.push({
                name: "channel",
                params: { id: this.activeName },
            });
            //点击渲染对应数据
            this.getData(this.activeName);
        },
        //下拉刷新
        onRefresh() {
            //下拉刷新
            setTimeout(() => {
                this.isLoading = false;
                this.getData(
                    this.$route.params.id,
                    this.GetRandomNum(1, this.totalPages.totalPages)
                );
                this.$toast.success("刷新成功"); //不能Toast，会找不到
            }, 1000);
        },
        onLoad() {
            setTimeout(() => {
                if (this.isLoading) {
                    this.newGoodsList = [];
                    this.isLoading = false;
                }
                // 得到商品数据
                GetChannelList({ categoryId: this.$route.params.id, page: this.totalPages.currentPage+1, size: 10 }).then(
                    (res) => {
                        // console.log(res);
                        let newArr = JSON.parse(JSON.stringify(this.newGoodsList))
                        res.data.data.goodsList.forEach(e => {
                            newArr.push(e) 
                        })
                        console.log(newArr);
                        this.newGoodsList = newArr
                        this.totalPages = res.data.data;
                    }
                );
                this.loading = false;
                if (this.totalPages.totalPages === this.totalPages.currentPage) {
                    this.finished = true;
                }
            }, 1000);
        },
        //随机数生成
        GetRandomNum(Min, Max) {
            var Range = Max - Min;
            var Rand = Math.random();
            return Min + Math.round(Rand * Range);
        },
        //封装的请求函数
        getData(sid, num = 1) {
            //得到顶部数据
            GetChannel({ id: sid }).then((res) => {
                // console.log(res);
                this.brotherCategory = res.data.data.brotherCategory;
                this.currentCategory = res.data.data.currentCategory;
                this.activeName = this.currentCategory.id;
            });
            //得到商品数据
            GetChannelList({ categoryId: sid, page: num, size: 10 }).then(
                (res) => {
                    // console.log(res);
                    this.newGoodsList = res.data.data.goodsList;
                    this.totalPages = res.data.data;
                }
            );
        },
    },
    created() {
        // console.log(this.$route.params.id);
        //一进来根据获取urlid并发送请求
        this.getData(this.$route.params.id);
    },
};
</script>
 
<style lang = "less" scoped>
.van-tab__pane {
    .channel_sub_title {
        text-align: center;
        height: 40px;
        line-height: 40px;
        color: #666;
    }
    .new {
        ul {
            display: flex;
            justify-content: space-between;
            padding: 0 10px;
            flex-wrap: wrap;
            li {
                width: 49%;
                background: #fff;
                text-align: center;
                margin-bottom: 10px;
                img {
                    width: 100%;
                }
                div {
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    padding-bottom: 15px;
                }
                p {
                    color: darkred;
                    padding-bottom: 10px;
                }
            }
        }
    }
}
</style>